<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <!-- <li>1.xxx</li> -->
        <!-- <li>2.xxx</li>
          <li>3.xxx</li> -->
    </ul>



    <script>
        //  渲染列表
        // function renderList() {
        //     var list = ['苹果', '香蕉', '雪梨'];
        //     var str = '';
        //     list.forEach(function(item, index) {
        //         str += `<li>${index+1}. ${item}</li>`;
        //     });
        //     document.querySelector('ul').innerHTML = str;
        // }

        // renderList();


        //  渲染列表
        var demo = {
            renderList: function() {
                var list = ['苹果', '香蕉', '雪梨'];
                var str = '';
                list.forEach(function(item, index) {
                    str += `<li>${index+1}. ${item}</li>`;
                });
                document.querySelector('ul').innerHTML = str;
                // 调用test方法
                // demo.test();
                this.test();
            },

            test: function() {
                console.log('test');
            }
        }

        demo.renderList();
    </script>
</body>

</html>